<template>
  <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
    <el-form-item prop="username">
      <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off"
        placeholder="请输入用户名">
        <i slot="prefix" class="icon-yonghu"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small" @keyup.enter.native="handleLogin" :type="passwordType" v-model="loginForm.password"
        auto-complete="off" placeholder="请输入密码">
        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"></i>
        <i slot="prefix" class="icon-mima"></i>
      </el-input>
    </el-form-item>
    <!-- <el-form-item prop="code">
      <Verify @success="verifySuccess" :mode="'pop'" :captchaType="'blockPuzzle'"
        :imgSize="{ width: '330px', height: '155px' }" ref="verify" />
    </el-form-item> -->
    <el-form-item>
      <el-button type="primary" @click.native.prevent="handleLogin" class="login-submit">登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  import {
    getCode
  } from "@/api/code";
  import Verify from "@/components/verifition/Verify";

  export default {
    name: "userlogin",
    components: {
      Verify
    },
    data() {
      return {
        passwordType: "password",
        loginForm: {
          username: "admin",
          password: "123456",
          code: "",
          captchaType: "blockPuzzle"
        },
        loginRules: {
          username: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }]
        }
      };
    },

    computed: {
      ...mapGetters(["tagWel", "website"])
    },
    methods: {
      showPassword() {
        this.passwordType == "" ? (this.passwordType = "password") : (this.passwordType = "");
      },
      handleLogin() {
        // this.$refs.loginForm.validate(valid => {
        //   if (valid) {
        //     this.$refs.verify.show();
        //   }
        // });
        this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
          this.$router.push({
            path: this.tagWel.value
          });
        });
      },
      verifySuccess(params) {
        this.loginForm.code = params.captchaVerification;

        this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
          this.$router.push({
            path: this.tagWel.value
          });
        });
      }


    }
  };
</script>

<style></style>
